<template>
    <!-- 外层容器：绑定遮罩层点击关闭事件 -->
    <div class="fixed inset-0 z-50 flex items-center justify-center" @click="handleOverlayClick" 
        >
        <!-- 遮罩层：仅作为视觉层，不绑定事件 -->
        <div class="absolute inset-0 bg-black/50 transition-opacity duration-300"></div>

        <!-- 模态框内容：阻止事件冒泡到外层容器 -->
        <div :class="modalClasses"
            class="relative z-10 bg-white rounded-lg shadow-xl overflow-hidden transform transition-all duration-300"
            @click.stop 
            >
            <!-- 头部：关闭按钮 -->
            <div class="px-6 py-4 border-b border-gray-200 flex justify-between items-center">
                <slot name="title">
                    <h3 class="text-lg font-bold text-gray-800">用户须知</h3>
                </slot>
                <button class="text-gray-400 hover:text-gray-600" @click="closeModal">
                    <i class="fa fa-times"></i>
                </button>
            </div>

            <!-- 内容区 -->
            <div class="px-6 py-4 max-h-[70vh] overflow-y-auto">
                <slot name="content"></slot>
            </div>

            <!-- 底部按钮 -->
            <div class="px-6 py-4 border-t border-gray-200 flex justify-end">
                <button class="px-4 py-2 bg-gray-200 rounded hover:bg-gray-300 transition-colors" @click="closeModal">
                    我知道了
                </button>
            </div>
        </div>
    </div>
</template>

<script setup>
const props = defineProps({
    size: {
        type: String,
        default: 'md',
        validator: (v) => ['sm', 'md', 'lg', 'xl', 'full'].includes(v)
    }
});

const emits = defineEmits(['close']);

// 遮罩层点击事件处理
const handleOverlayClick = () => {
    // 点击遮罩层时触发关闭
    emits('close');
};

// 关闭模态框方法
const closeModal = () => {
    emits('close');
};

// 尺寸计算
const modalClasses = computed(() => {
    const sizes = {
        sm: 'w-full max-w-sm',
        md: 'w-full max-w-md',
        lg: 'w-full max-w-lg',
        xl: 'w-full max-w-xl',
        full: 'w-full max-h-full'
    };
    return sizes[props.size];
});
</script>